<template>
	<view class="flex flex-y-start" @tap="choose_one(info,checked)">
		<view v-if="chat_checked" style="width: 70rpx;margin-top: 40rpx;padding-left: 20rpx;" class="flex flex-x-y">
			<view class="iconfont icon-xuanzhong color-all" style="font-size: 34rpx;width: 30rpx;" v-if="checked">
			</view>
			<view class="iconfont icon-weixuanzhong" style="font-size: 34rpx;width: 30rpx;" v-else></view>
		</view>
		<view class="flex-1 flex flex-y-start" :class="!info.mine?'msg-left':'msg-right'"
			style="padding:32rpx 28rpx 0 28rpx;" :style="info.mine?'flex-direction: row-reverse;':''">
			<!-- 头像 -->
			<view class="msg-image-box" @tap.stop="to_detail">
				<!-- <image :src="info.avatarUrl" mode="aspectFill"></image> -->
				<qq-image :url="info.avatarUrl" class="avatar-image"></qq-image>
			</view>
			<!-- 头像 -->
			<!-- 内容 -->
			<view style="overflow: hidden;max-width: 400rpx;">
				<view v-if="!info.mine && chatType!='one'" class="msg-nickname fs-26" @tap.stop="to_detail">
					{{remark_obj[info.id] || remark_obj[info.fromid] || group_remark_obj[info.id] || info.name}}
				</view>

				<view class="flex flex-y-end read-box" @longpress="edit_one">
					<view class="fs-24 read-status pr" v-if="info.mine &&  show_read_msg">
						<view :class="info.readFlag?'read-status1':'read-status2'">{{info.readFlag?'已读':'未读'}}</view>
					</view>
					<view style="overflow: hidden;" @tap.stop="to_user_detail"
						:class="['msg-content' + info.timestamp]">
						<view class="msg-card-box">
							<view style="border-bottom: 1px solid #F5F6F7;padding:20rpx;" class="flex flex-y-center">
								<view class="msg-image-box" style="margin: 0;" @tap.stop="to_detail">
									<!-- <image :src="info.avatarUrl" mode="aspectFill"></image> -->
									<qq-image :url="avatarUrl" class="avatar-image"></qq-image>
								</view>
								<view class="flex-1 over-line1 fs-30 color-333333 pl-20">
									{{name}}
								</view>
							</view>
							<view class="fs-24 color-999999" style="padding: 8rpx 0 8rpx 20rpx;">
								个人名片
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
	</view>
	</view>
</template>

<script>
	export default {
		name: "msg-card",
		props: {
			info: {
				type: Object,
				default: () => {},
			},
			chatType: {
				type: String,
				default: '',
			},
			id: {
				type: [String, Number],
				default: '',
			}

		},
		data() {
			return {
				checked: false,
				name: '',
				avatarUrl: '',
				userId: '',
			};
		},
		watch: {
			chat_checked(value) {
				this.checked = false;
			},
		},
		created() {
			this.set_style();
		},
		methods: {

			to_user_detail(){
				if(this.user_info.id == this.userId) return ;
				if(this.id == this.userId){
					//自己的好友
					this.toPage(`/pages/chat/user-info?id=${this.userId}&send=0`);
				} else {
					this.toPage(`/pages/chat/user-info?id=${this.userId}`);
				}
			},
			to_detail() {
				return;
				
				if (this.info.mine) {
					this.toPage('/pages/chat/user?mine=true');
				} else {
					this.$emit('show', this.info);
				}
			},
			set_style() {

				if (this.info.content) {
					let regex = /\[(.+?)\]/g;
					let str_arr = String(this.info.content).match(regex);
					// console.log('str_arr', str_arr);

					if (str_arr.length == 2) {
						this.userId = str_arr[0].replace('[', '').replace(']', '');
						this.avatarUrl = str_arr[1].replace('[', '').replace(']', '');
						this.name = this.info.content.substr(str_arr[0].length + str_arr[1].length);
						// console.log('sss',this.id,this.avatarUrl,this.name);
					}


				}

			},

			edit_one(e) {

				let obj = uni.createSelectorQuery().select('.msg-content' + this.info.timestamp, this);

				obj.boundingClientRect((data) => {

					let h = getApp().globalData.screenHeight;
					let scrollTop = e.changedTouches[0].pageY - e.changedTouches[0].clientY;

					console.log('scrollTop', data.top, data.width);
					let top = data.top;
					let style2 = '';
					let style = 'style1';
					if (h - top > 600) {
						// 下方显示
						top = top + data.height + 14;
						style = this.info.mine ? 'style2' : 'style1';
					} else {
						//上方显示
						top = top - 14;
						style2 = 'top';
						style = this.info.mine ? 'style4' : 'style3';
					}
					this.vuexSet('show_msg_edit', {
						top: top,
						style: style,
						style2: style2,
						info: this.info,
						powers: [
							'check', 'back', 'delete', 'send'
						]
					});

				}).exec();

			},
		}
	}
</script>

<style lang="scss">
	.msg-content {
		// background-color: #2D2E30;
		text-align: justify;

		color: #fff;
	}

	.msg-left {
		.msg-image-box {
			margin-right: 20rpx;
		}

		.msg-content {
			border-radius: 8rpx 16rpx 16rpx 16rpx;
		}
	}

	.msg-right {
		.msg-image-box {
			margin-left: 20rpx;
		}

		.msg-content {
			border-radius: 16rpx 8rpx 16rpx 16rpx;
		}
	}

	.msg-card-box {
		width: 360rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
</style>
